<template>
  <view class="hb-p-4 hb-bg-white hb-flex hb-items-center">
    <view class="hb-mr-2">
      <TImage
        width="96rpx"
        height="96rpx"
        border-radius="16rpx"
        error-img-type="default"
        :src="botInfo?.iconFileUrl"
      ></TImage>
    </view>
    <view class="hb-flex hb-flex-1 hb-flex-col hb-gap-1 hb-mr-3">
      <text class="hb-leading-6 hb-text-[32rpx]">{{ botInfo?.name }}</text>
      <view class="hb-flex hb-gap-1">
        <AuthenticationTag
          v-if="userStore.customerServiceUuid !== props.botInfo.uuid"
          :certificationType="botInfo?.certificationType!"
        />
        <RoleTag v-else type="member" text="官方客服" />
      </view>
    </view>
    <view class="hb-flex hb-gap-2">
      <view v-if="showCard" id="chat-guide-step-2" @click="handleAddUnit">
        <tm-icon :font-size="48" color="#2878FF" name="ali-icon icon-shenfen" />
      </view>
      <view v-if="showPhone" id="chat-guide-step-3" @click="handleClickPhone">
        <tm-icon :font-size="48" color="#2878FF" name="ali-icon icon-phone" />
      </view>
      <view v-if="showAddFriend" id="chat-guide-step-4" @click="handleAddFriend">
        <tm-icon :font-size="48" color="#2878FF" name="ali-icon icon-jiaren" />
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import TImage from '@/components/TImage/index.vue';
  import { getBotById } from '@/api/aiChatPage';
  import { BotInfo } from '@/api/aiChatPage/types';
  import AuthenticationTag from '@/components/RoleTag/AuthenticationTag.vue';
  import { useUserStore } from '@/store/modules/user';
  import { GuideType, useGuideStore } from '@/store/modules/guide';
  // 获取 chatStore 实例
  const userStore = useUserStore();

  const props = defineProps<{
    botInfo: BotInfo;
    uuid: string;
  }>();

  const ins = getCurrentInstance();

  const showCard = computed(() => {
    return userStore.customerServiceUuid !== props.botInfo.uuid;
  });

  if (showCard.value) {
    useGuideStore().addGuide(
      1,
      {
        title: '智能名片',
        description: '可查看对方的名片信息，快速了解他。',
        nodeInfo: {
          selector: '#chat-guide-step-2',
          ins,
        },
      },
      GuideType.CHAT,
    );
  }
  const showPhone = computed(() => {
    return props.botInfo.phone && props.botInfo.isShowPhone;
  });

  if (showPhone.value) {
    useGuideStore().addGuide(
      2,
      {
        title: '联系对方',
        description: '若对方公开了联系方式，可直接联系对方。',
        nodeInfo: {
          selector: '#chat-guide-step-3',
          ins,
        },
      },
      GuideType.CHAT,
    );
  }
  const showAddFriend = computed(() => {
    const is =
      userStore.userInfo?.aiUserAccountBotVo?.uuid !== props.uuid &&
      userStore.customerServiceUuid !== props.botInfo.uuid &&
      userStore.userInfo?.aiUserAccountBotVo?.uuid &&
      !props.botInfo.isFriend;
    return is;
  });

  if (showAddFriend.value) {
    useGuideStore().addGuide(
      3,
      {
        title: '添加好友',
        description: '如果想要与对方长期互动，可添加为好友，互相共享资源文件哦~',
        nodeInfo: {
          selector: '#chat-guide-step-4',
          ins,
        },
      },
      GuideType.CHAT,
    );
  }

  const handleAddFriend = () => {
    navigateTo({
      name: 'addFriend',
      options: {
        beApplyBotUUid: props.botInfo.uuid!,
      },
    });
  };

  const handleAddUnit = () => {
    navigateTo({
      name: 'cardDetail',
      options: {
        uuid: props.botInfo.uuid!,
      },
    });
  };

  const handleClickPhone = () => {
    uni.makePhoneCall({
      phoneNumber: props.botInfo.phone || '',
    });
  };
</script>

<style lang="scss" scoped></style>
